<template>
    <div class="result">
        <!-- 头部搜索框 -->
        <search>
            <template #sl-icon>
                <svg @click="back" t="1636616685570" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2419" width="200" height="200"><path d="M677.391515 873.916768c-7.86101 0-15.618586-2.999596-21.617778-8.895354L324.473535 533.721212c-11.998384-11.894949-11.998384-31.340606 0-43.235555L655.670303 159.288889c5.999192-5.999192 13.756768-8.895354 21.617778-8.895354 7.757576 0 15.618586 2.999596 21.617778 8.895354 11.894949 11.894949 11.894949 31.237172 0 43.235555L389.223434 512.103434 698.905859 821.785859c11.894949 11.998384 11.894949 31.340606 0 43.235555-5.895758 5.895758-13.756768 8.895354-21.514344 8.895354z m0 0" fill="#666666" p-id="2420"></path></svg>
            </template>
            <template #sm-inp>
                <input type="text" placeholder="请输入关键词..." v-model="entry.inpKeyword">
           </template>
            <template #sm-close>
                <svg @click="close" t="1636617495677" class="icon close" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3753" width="200" height="200"><path d="M512 64c-247.00852 0-448 200.960516-448 448S264.960516 960 512 960c247.00852 0 448-200.960516 448-448S759.039484 64 512 64zM694.752211 649.984034c12.480043 12.54369 12.447359 32.768069-0.063647 45.248112-6.239161 6.208198-14.399785 9.34412-22.591372 9.34412-8.224271 0-16.415858-3.135923-22.65674-9.407768l-137.60043-138.016718-138.047682 136.576912c-6.239161 6.14455-14.368821 9.247789-22.496761 9.247789-8.255235 0-16.479505-3.168606-22.751351-9.504099-12.416396-12.576374-12.320065-32.800753 0.25631-45.248112l137.887703-136.384249-137.376804-137.824056c-12.480043-12.512727-12.447359-32.768069 0.063647-45.248112 12.512727-12.512727 32.735385-12.447359 45.248112 0.063647l137.567746 137.984034 138.047682-136.575192c12.54369-12.447359 32.831716-12.320065 45.248112 0.25631 12.447359 12.576374 12.320065 32.831716-0.25631 45.248112L557.344443 512.127295 694.752211 649.984034z" p-id="3754" fill="#8a8a8a"></path></svg>
           </template>
            <template #sr-icon>
                <svg t="1636593252379" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3104" width="200" height="200"><path d="M880 640v144c0 35.2-28.8 64-64 64H208c-35.2 0-64-28.8-64-64V240c0-35.2 28.8-64 64-64h208c17.6 0 32-14.4 32-32s-14.4-32-32-32H208c-70.4 0-128 57.6-128 128v544c0 70.4 57.6 128 128 128h608c70.4 0 128-57.6 128-128v-144c0-17.6-14.4-32-32-32s-32 14.4-32 32z" fill="#707070" p-id="3105"></path><path d="M835.2 176H624c-17.6 0-32-14.4-32-32s14.4-32 32-32h288c9.6 0 17.6 3.2 22.4 9.6 6.4 4.8 9.6 12.8 9.6 22.4v288c0 17.6-14.4 32-32 32s-32-14.4-32-32V220.8L403.2 699.2c-12.8 12.8-32 12.8-44.8 0s-12.8-32 0-44.8L835.2 176z" fill="#707070" p-id="3106"></path></svg>
           </template>
        </search>

        <!-- 内容 -->
        <main class="main">
            <entry v-for="item in entry.resData" :key="item.id" :obj="item"></entry>
            <p class="tip" v-if="isShow">暂无搜索结果</p>
        </main>
    </div>
</template>
<script>
import search from "../components/hot-search.vue"
import entry from "../components/entry.vue"
import {mapState} from "vuex"
export default {
    name:"Result",
    components:{
        search,entry
    },
    data(){
        return{
            isShow:false
        }
    },
    methods:{
        back(){
            this.$router.go(-1);
            this.$store.commit('entry/clearResData')
        },
        close(){
            this.$store.commit('entry/clearResData');
            this.$router.replace({path:"/findSearch"});
        }
    },
    computed:{
        ...mapState(["entry"])
    },
    mounted(){
        if(this.entry.resData.length== 0){
            this.isShow = true;
        }else{
            this.isShow=false;
        }
        // console.log(this.entry.resData);
    }
}
</script>
<style lang="scss" scoped>
@import '../assets/common/base.scss';
.main{
    position: absolute;
    top: 50px;
    left: 0;
    height: auto;
    width: 100%;
    height: 100%;
    overflow-y:scroll;
    background-color: $bodyCol;
    .tip{
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        text-align: center;
        margin-top: 10px;
    }
}
</style>